<template>
	<view class="container">
		<!-- 轮播区域 start-->
		<view class="poster_bg" style="">
			<view class="swiper">
				<swiper class="swiper" autoplay="true" interval="5000" duration="500" circular="true" indicator-dots="true" indicator-active-color="#ffffff">
					<swiper-item v-for="item in AdList">
						<view class="swiper-item uni-bg-red" @click="ClickAd(item)"><image :src="Tools.GetImg(item.Img,1000)" mode="aspectFill"></image></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="panel">
			<view class="search"><view class="icon"><image src="/static/search.png" /></view><view class="input"><input type="text" placeholder="输入达人昵称进行搜索" confirm-type="search" @confirm="Search"/></view></view>
			<view class="menu">
				<view class="nav">
					<view class="square" @click="Join()"><view class="icon"><image src="/static/yijianruzhu.png"/></view><view class="name">一键入驻</view></view>
					<view class="square" @click="DaRen()"><view class="icon"><image src="/static/zhaodaren.png"/></view><view class="name">找达人</view></view>
					<view class="square" @click="HeZuo()"><view class="icon"><image src="/static/zhaohezuo.png"/></view><view class="name">找合作</view></view>
					<view class="square" @click="OpenVip()"><view class="icon"><image src="/static/huiyuanzhongxin.png"/></view><view class="name">会员中心</view></view>
				</view>
			</view>		
			<view class="head"><view class="icon"><image src="/static/douyin.png" /></view><view class="title">抖音达人</view></view>
			<view class="darenlist">
				<view class="list" @click="DaRenInfo(item.ID)" v-for="item in DouYinList">
					<view class="headimg"><image :src="item.HeadImg" /></view>
					<view class="userinfo">
						<view class="nickname">{{item.NickName}}</view>
						<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view></view>
						<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					</view>
					<view class="brief">{{item.Brief}}</view>
				</view>				
			</view>
			<view class="head"><view class="icon"><image src="/static/xiaohongshu.png" /></view><view class="title">小红书达人</view></view>
			<view class="darenlist">
				<view class="list" @click="DaRenInfo(item.ID)" v-for="item in XiaoHongShuList">
					<view class="headimg"><image :src="item.HeadImg" /></view>
					<view class="userinfo">
						<view class="nickname">{{item.NickName}}</view>
						<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view></view>
						<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					</view>
					<view class="brief">{{item.Brief}}</view>
				</view>
			</view>
			<view class="head"><view class="icon"><image src="/static/meishi.png" /></view><view class="title">美食达人</view></view>
			<view class="darenlist">
				<view class="list" @click="DaRenInfo(item.ID)" v-for="item in MeiShiList">
					<view class="headimg"><image :src="item.HeadImg" /></view>
					<view class="userinfo">
						<view class="nickname">{{item.NickName}}</view>
						<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view></view>
						<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					</view>
					<view class="brief">{{item.Brief}}</view>
				</view>
			</view>
			<view class="head"><view class="icon"><image src="/static/shishang.png" /></view><view class="title">时尚达人</view></view>
			<view class="darenlist">
				<view class="list" @click="DaRenInfo(item.ID)" v-for="item in ShiShangList">
					<view class="headimg"><image :src="item.HeadImg" /></view>
					<view class="userinfo">
						<view class="nickname">{{item.NickName}}</view>
						<view class="funs"><view class="name">粉丝</view><view class="count">{{item.FunsCount}}</view></view>
						<view class="funs"><view class="name">获赞</view><view class="count">{{item.PraiseCount}}</view></view>
					</view>
					<view class="brief">{{item.Brief}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onShareAppMessage: function() {
			var UserID = uni.getStorageSync("UserID");
		    return {
		      title: this.Title,
		      path: "pages/index/index?scene="+UserID//这是一个路径
		    }
		},
		data() {
			return {
				Title:'',
				Keyword:'',
				AdList:[],
				DouYinList:[],
				XiaoHongShuList:[],
				MeiShiList:[],
				ShiShangList:[],
				ColorList:["#4682e9","#f99a4b","#e76a39","#776ae0","#ea59aa","#3b74da","#63bd77","#de412a","#367b9b","#8a2cc4"],
				Opacity:0,
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
			};
		},
		onPullDownRefresh() {
			this.Find_Home();
		},
		onPageScroll(res) {
			this.Opacity=res.scrollTop/100;
		},
		onPullDownRefresh() {
			this.Find_Home();
		},
		onShow() {
			uni.$once("Success",item=>{
				this.Find_Home(1);
			});
		},
		onLoad(options) {
			//uni.setStorageSync("ShopID",3); //测试用 
			this.Util.SetParam(options); 
			// #ifdef MP-WEIXIN
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
			this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
			this.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			this.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
			this.menuHeight = menuButtonInfo.height;
			// #endif
			this.Find_Home();
		},
		methods:{
			Join(){
				uni.navigateTo({
					url:'/pages/index/join'
				})
			},
			DaRen(){
				uni.switchTab({
					url:'/pages/darenku/darenkulist'
				})
			},
			HeZuo(){
				uni.switchTab({
					url:'/pages/case/caselist'
				})
			},
			OpenVip(){
				uni.switchTab({
					url:'/pages/my/my'
				})
			},
			Search(e){
				 uni.navigateTo({
				 	url:'/pages/darenku/searchlist?Keyword='+e.detail.value
				 })				
			},
			DaRenInfo(ID){
				uni.navigateTo({
					url:'/pages/darenku/darenkuinfo?ID='+ID
				})
			},
			NewsInfo(ID){
				this.ShowNotice=false;
				uni.navigateTo({
					url:'/pages/news/newsinfo?ID='+ID
				})
			},
			Find_Home(){
				var data = {};
				data.Act="Find_Home";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{					
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Title=json.Data.Title;
					this.AdList = json.Data.AdList;
					this.DouYinList = json.Data.DouYinList;
					this.XiaoHongShuList = json.Data.XiaoHongShuList;
					this.MeiShiList = json.Data.MeiShiList;
					this.ShiShangList = json.Data.ShiShangList;
				});
			},
			Find_Group(){
				var data = {};
				data.Act="Find_Group";
				data.Keyword = this.Keyword;
				data.ProvinceID=this.ProvinceID;
				this.GroupList=[];
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.GroupList = json.Data.GroupList;
					uni.pageScrollTo({
				　　　　duration: 500,// 过渡时间
				　　　　selector: '.search',// 滚动的实际距离
				　　});
				});
			},
			ClickAd(item){
				uni.switchTab({
					url:'/pages/service/service'
				})
			},
			CloseDialog(){
				this.ShowDialog=false;
			},
			CloseNotice(){
				this.ShowNotice=false;
			},
			ClosePay(){
				this.ShowPay=false;
			},
			WxPay(){
				var data = {};
				data.Act="Find_XcxPayParam";
				data.Flag="member";
				data.Money= this.Shop.MemberMoney;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: json.Data.timestamp,
						nonceStr: json.Data.noncestr,
						package: json.Data.package,
						signType: json.Data.signType,
						paySign: json.Data.sign,
						success: res=> {
							this.Util.Toast("支付成功",item=>{
								uni.$emit("Success");
								this.ShowPay = false;
								this.Util.ToSuccess('/pages/my/my','支付成功','我的');
							});
							
						},
						fail: function(err) {
							
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f5f5f5;}
	.container{width:100%; display: flex; flex-direction: column;
		.homebg{width:750rpx; height:430rpx; background-size: 750rpx 430rpx; background-repeat: no-repeat; 
		}
		.swiper{position: relative; z-index:1;}
		.search2{position: absolute; top:8px; z-index:99; width:300rpx; margin-left:200rpx; height:30px !important; line-height: 30px!important; border-radius: 15px; padding-left:10rpx; background:#f5f5f5;  display: flex; flex-direction: row;
			.icon{width:50rpx; display: flex; flex-direction: column; height:30px !important; align-items: center; image{width:32rpx; height:32rpx; margin:auto;}}
			.tip{width:auto; color:#808080; font-size:28rpx; height:30px !important; line-height: 30px!important;}
		}
		.news{width:100%; height:90rpx; display:flex; flex-direction: row; padding:25rpx;
			.icon{width:auto; height:50rpx; line-height:50rpx; padding-left:10rpx; padding-right:10rpx; border-radius:10rpx; font-size:32rpx; background: #ff6130; color:#ffffff;}
			.title{flex:1; height:50rpx; line-height:50rpx; color:#5e5e5e; overflow:hidden; padding-left:15rpx; font-size:32rpx; }
			.more{width:auto; height:50rpx; line-height:50rpx; color:$uni-color-gray; padding-left:15rpx; font-size:30rpx; }
		}
		.panel{width:100%; height:auto; padding-top:20rpx; padding-bottom:20rpx; float:left;
			.search{width:700rpx; height:90rpx; margin-left:25rpx; padding-top:20rpx; padding-left:20rpx; float:left; border-radius: 10rpx; background-color:#ffffff; display: flex; flex-direction: row;
				.icon{width:50rpx; height:50rpx; margin-top:5rpx; image{width:100%; height:100%;}}
				.input{flex:1; padding-left:10rpx;}
			}
			.menu{width:700rpx; height:240rpx; margin-left:25rpx; margin-top:15rpx; border-radius:20rpx; float:left; background-color: #ffffff; z-index:1; padding-left:20rpx; padding-right:20rpx;
				.nav{width:100%; height:240rpx; display: flex; flex-direction: row; justify-content: space-between; padding-top:10rpx;
					.square{width:165rpx; height:220rpx; display:flex; flex-direction: column; align-items: center; border-radius: 10rpx; padding-top:10rpx;
						.icon{width:140rpx; height:140rpx; text-align: center;
							image{width:140rpx; height:140rpx; margin-top:5rpx;}
						}
						.name{width:100%; height:50rpx; padding-top:10rpx; text-align: center; font-size:30rpx; color:#272727;}
					}
					.square:active{background-color: #fdebde;}
				}
				.line{width:100%; margin-bottom:30rpx;}
			}
			.head{width:700rpx; height:50rpx; margin-left:25rpx; margin-top:20rpx; float:left; display: flex; flex-direction: row;
				.icon{width:50rpx; height:50rpx; image{width:100%; height:100%; border-radius: 0rpx;}}
				.title{width:500rpx; height: 50rpx; line-height: 50rpx; font-size:40rpx; font-weight: bold; padding-left:10rpx;}
			}
			.darenlist{width:700rpx; height:auto; margin-left:25rpx; margin-top:15rpx; float:left;  z-index:1; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
				.list{width:340rpx; height:207rpx; background-color: #ffffff; border-radius: 20rpx; padding:15rpx; padding-left:10rpx; padding-right: 10rpx; margin-bottom: 10rpx;
					.headimg{width:100rpx; height:100rpx; float:left; image{width:100rpx; height:100rpx; border-radius: 50rpx;}}
					.userinfo{width:215rpx; padding-left:10rpx; float:left;
						.nickname{width:100%; height:36rpx; font-size:28rpx; font-weight: bold; margin-top:-5rpx; margin-bottom: 5rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
						.funs{width:100%; height:32rpx; display: flex; flex-direction: row; font-size:24rpx; .name{width:60rpx; color:#8f8d90;} .count{flex:1;}}
					}
					.brief{width:100%; height:75rpx; float:left; line-height: 34rpx; border-radius: 10rpx; padding-left:6rpx; padding-right: 6rpx; padding-top:6rpx; margin-top:8rpx; background-color: #fef7ed; color:#4f4f4f; font-size:26rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
				}
				.list:active{background-color: #dbdbdb;}
			}
			.video{width:700rpx; height:auto; margin-top:20rpx; margin-left:25rpx; border-radius:20rpx; z-index:1; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
				.list{width:340rpx; height:200rpx; border-radius:20rpx; margin-bottom: 20rpx; display: flex; flex-direction: row;
					.logo{width:90rpx; height:90rpx; margin-left:20rpx; margin-top:55rpx; background-color: #ffffff; border-radius: 50rpx; text-align: center; image{width:70rpx; height:70rpx; margin-top:10rpx;}}
					.right{flex:1; 
						.title{width:100%; height:100rpx; font-size:42rpx; color:#ffffff; padding-left:20rpx; padding-top:50rpx;}
						.tip{width:100%; height:100rpx; font-size:30rpx; color:#ffffff; padding-left:20rpx; padding-top:10rpx;}
					}
					
				}
				.list:active{opacity: 0.6;}
			}
			.basic{width:700rpx; height:auto; margin-top:20rpx; margin-left:25rpx; border-radius:20rpx; z-index:1; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
				.square1{width:400rpx; height:180rpx; border-radius:20rpx;background:linear-gradient(to right,#d8e8db,#c8e8ce); margin-bottom:20rpx;}
				.square2{width:280rpx; height:180rpx; border-radius:20rpx;background:linear-gradient(to right,#d6e7f1,#c8e3f2); margin-bottom:20rpx; margin-left:20rpx;}
				.square3{width:280rpx; height:180rpx; border-radius:20rpx;background:linear-gradient(to right,#e2e6ff,#d1d7ff); }
				.square4{width:400rpx; height:180rpx; border-radius:20rpx;background:linear-gradient(to right,#d2eef1,#c4edf1); margin-left:20rpx;}
				image{width:100%; height:100%;}
			}
			.model{width:700rpx; height:auto; margin-top:20rpx; margin-left:25rpx; margin-bottom:40rpx; display: flex; flex-direction: column;
				.top{width:160rpx; height:70rpx; margin:0 auto; margin-top:20rpx; color:#ffffff; display: flex; flex-direction: row; justify-content: space-between;
					.title{width:100%; height:70rpx; line-height: 70rpx; border-radius:70rpx; font-size:40rpx; padding-left:20rpx; padding-right:20rpx; text-align: center;}
				}
				.bottom1{width:100%; height:auto; padding-bottom:40rpx;
					.list{width:100%; height:130rpx; margin-top:20rpx; display: flex; flex-direction: row; background-color: #ffffff; 
						.imglist{width:106rpx; height:106rpx; background-color: #e2e2e2; position: relative; z-index:0;
							image{width:30rpx; height:30rpx; float:left; margin-left:5rpx; margin-top:5rpx; border-radius:0rpx;}
							.dot{width:20rpx; height:20rpx; background-color: #e1230b; border-radius: 20rpx; position: absolute; z-index:99; right:-8rpx; top:-8rpx;}
						}
						.middle{flex:1; padding-left:20rpx; padding-right:20rpx; padding-top:0rpx;
							.name{width:100%; height:40rpx; overflow: hidden; font-weight: bold; font-size:37rpx; line-height: 40rpx; margin-bottom:10rpx; position:relative;
								
							}
							.text{width:100%; height:60rpx; line-height: 30rpx; font-size:30rpx; color:#808080; overflow: hidden;}
						}
						.right{width:120rpx; height:60rpx; line-height: 60rpx; border-radius:30rpx; margin-top:20rpx; text-align: center; font-size:32rpx; background-color: #3266fd; color:#ffffff;}
					}
					
				}
				.bottom2{width:100%; height:auto; padding-bottom:40rpx; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap;
					.list{width:340rpx; height:470rpx; margin-top:20rpx; display: flex; flex-direction: column; float:left; background-color: #ffffff; border-radius:20rpx; overflow: hidden;
						.img{width:340rpx; height:340rpx; image{width:100%; height:100%; border-radius:0rpx;}}
						.brief{flex:1; padding-left:20rpx; padding-right:20rpx; padding-top:10rpx;
							.name{width:100%; height:50rpx; text-indent:90rpx; overflow: hidden; font-size:37rpx; line-height: 5orpx; margin-bottom:20rpx; position:relative;
								
							}
							.price{width:100%; height:50rpx; font-size:32rpx; color:#808080; text{color:red;}}
						}
					}
				}
			}
		}
		
	}
	image/*图片*/{border-radius: 20rpx;}
	.poster_bg/*轮播区*/{flex-direction: column;/*垂直排列*/width: 750rpx; height: 300rpx; padding-left:25rpx; margin-top:20rpx; border-radius: 14rpx;
		// #ifdef H5
		margin-top:20rpx !important;
		// #endif 
	}
	.poster/*海报*/{height: 300rpx;width: 700rpx;border-radius: 14rpx;}
	.navbg/*轮播条*/{display: flex;/*定义弹性布局*/justify-content: center;/*水平居中对齐*/}
	.swiper{width:700rpx; height:300rpx; border-radius: 14rpx;
		swiper-item{width:100%; height:300rpx; border-radius: 14rpx;
			.swiper-item{width:100%; height:300rpx; border-radius: 14rpx;}
		}
		image{width:100%;height:300rpx; border-radius: 10rpx; overflow:hidden;}
	}
</style>
